<!DOCTYPE html>
<html>


<!-- Mirrored from www.gzsxt.cn/theme/hplus/table_basic.html by HTTrack Website Copier/3.x [XR&CO'2014], Wed, 20 Jan 2016 14:20:01 GMT -->
<head>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">


    <title>办公系统 - 基础表格</title>
    <meta name="keywords" content="办公系统">
    <meta name="description" content="办公系统">

    <link rel="shortcut icon" href="favicon.ico">
    <link href="css/bootstrap.min14ed.css?v=3.3.6" rel="stylesheet">
    <link href="css/plugins/sweetalert/sweetalert.css" rel="stylesheet">
    <link href="css/font-awesome.min93e3.css?v=4.4.0" rel="stylesheet">
    <link href="css/animate.min.css" rel="stylesheet">
    <link href="css/style.min862f.css?v=4.1.0" rel="stylesheet">
    <link href="css/plugins/select/bootstrap-select.min.css" rel="stylesheet">

</head>

<body class="gray-bg">
<div class="wrapper2 wrapper-content2 animated fadeInRight">
    <div class="row">
        <div class="col-sm-5">
            <div class="ibox float-e-margins">
                <div class="ibox-title">
                    <h5>添加角色</h5>
                </div>
                <div class="ibox-content">
                    <form id="dataForm" class="form-horizontal">
                        <input type="hidden" name="roleid"/>
                        <div class="form-group">
                            <label class="col-sm-3 control-label">角色名称：</label>

                            <div class="col-sm-8">
                                <input type="text" name="rolename" class="form-control">
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-3 control-label">角色描述：</label>

                            <div class="col-sm-8">
                                <input type="text" name="roledis" class="form-control">
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-3 control-label">是否启用：</label>
                            <div class="col-sm-8">
                                <input type="radio" class="statusYes" name="status" value="1" checked>是
                                <input type="radio" class="statusNo" name="status" value="0">否
                            </div>
                        </div>
                        <div class="form-group">
                            <div class="col-sm-offset-3 col-sm-8">
                                <button class="btn btn-sm btn-white btnSave" type="button"><i class="fa fa-save"></i> 保存
                                </button>
                                <button class="btn btn-sm btn-white btnReset" type="button"><i class="fa fa-undo"></i>
                                    重置
                                </button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
        <div class="col-sm-7">
            <div class="ibox float-e-margins">
                <div class="ibox-title">
                    <h5>角色列表 <small>点击修改信息将显示在左边表单</small></h5>
                </div>
                <div class="ibox-content">
                    <div class="hr-line-dashed2"></div>
                    <div class="row">
                        <div class="table-responsive">
                            <table class="table table-striped list-table">
                                <thead>
                                <tr>
                                    <th>选择</th>
                                    <th>角色名称</th>
                                    <th>角色描述：</th>
                                    <th>是否启用</th>
                                    <th>操作</th>
                                </tr>
                                </thead>
                                <tbody>

                                </tbody>
                            </table>
                        </div>
                        <div class="row">
                            <div class="col-sm-5">
                                <button class="btn btn-sm btn-primary btnAll" type="button"><i
                                        class="fa fa-check-square-o"></i> 全选
                                </button>
                                <button class="btn btn-sm btn-primary btnRever" type="button"><i
                                        class="fa fa-square-o"></i> 反选
                                </button>
                                <button class="btn btn-sm btn-primary btnRemoveAll" type="button"><i
                                        class="fa fa-times-circle-o"></i> 删除
                                </button>
                            </div>
                            <div class="col-sm-7 text-right">
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

    </div>

</div>
<script src="js/jquery.min.js?v=2.1.4"></script>
<script src="js/bootstrap.min.js?v=3.3.6"></script>
<script src="js/plugins/select/bootstrap-select.min.js"></script>
<script src="js/plugins/sweetalert/sweetalert.min.js"></script>

<script>
    $(document).ready(function () {
        loadRole();
        //加载角色
        function loadRole() {
            $("tbody").html("");
            $.getJSON("/role/list", function (response) {
                $(response).each(function () {
                    let isValue = "是";
                    if (this.status == "0") {
                        isValue = "否";
                    }
                    let $str = ` <tr>
                                     <td><input  type="checkbox" value="`+this.roleid+`"></td>
                                     <td>` + this.rolename + `</td>
                                     <td>` + this.roledis + `</td>
                                     <td>` + isValue + `</td>
                                     <td id="` + this.roleid + `">
                                   <a href="javascript:void(0)" class="btnUpdate"><i
                                                class="glyphicon glyphicon-edit  text-navy"></i></a>
                                        <a href="javascript:void(0)" class="btnDel"><i
                                                class="glyphicon glyphicon-remove  text-navy"></i></a>
                                     </td>
                                   </tr>`;
                    $("tbody").append($str);
                });
            });
        }

        let methodName = "save"
        //添加
        $(".btnSave").click(function () {
            let data = $("#dataForm").serialize();
            $.post("/role/" + methodName, data, function (response) {
                let message = "添加";
                if (methodName == "update") {
                    message = "修改";
                }
                if (response == "success") {
                    swal(message + "成功", "为您刷新数据", "success");
                    loadRole();
                    reset();
                } else {
                    swal(message + "失败", "请检查数据有效性...", "error");
                }
            }, "text");
        });

        function reset() {
            $("input[name=roleid]").val("0");
            $("#dataForm")[0].reset();
            methodName = "save";
            $(".statusYes").prop("checked", "checked");
        }

        //修改
        $("body").on("click", ".btnUpdate", function () {
            let id = $(this).parents("td").prop("id");
            $.getJSON("/role/get", {"id": id}, function (response) {
                $("input[name=roleid]").val(response.roleid);
                $("input[name=rolename]").val(response.rolename);
                $("input[name=roledis]").val(response.roledis);
                if (response.status == "1") {
                    $(".statusYes").prop("checked", "checked");
                } else {
                    $(".statusYes").prop("checked", "");
                    $(".statusNo").prop("checked", "checked");
                }
            });
            methodName = "update";
        });

        $("body").on("click", ".btnDel", function () {
            let id = $(this).parents("td").prop("id");
            let $this = $(this);
            swal({
                title: "您确定要删除这条信息吗",
                text: "删除后将无法恢复，请谨慎操作！",
                type: "warning",
                showCancelButton: true,
                confirmButtonColor: "#DD6B55",
                confirmButtonText: "删除",
                closeOnConfirm: false,
                cancelButtonText: "取消",
            }, function () {//此函数是点击删除执行的函数
                //这里写ajax代码
                // 以下是成功的提示框，请在ajax回调函数中执行
                remove(id, $this);
            });
        });

        function remove(id, $this) {
            $.post("/role/remove", {"id": id}, function (response) {
                if (response == "success") {
                    swal("删除成功", "为您刷新数据", "success");
                    $this.parents("tr").remove();
                } else {
                    swal("删除失败", "请检查数据有效性...", "error");
                }

            }, "text");
        }

        //重置
        $(".btnReset").click(function () {
            reset();
        });

        //全选
        $(".btnAll").click(function () {
            $("input:checkbox").each(function () {
                $(this).prop("checked", "checked");
            });
        });

        //反转
        $(".btnRever").click(function () {
            $("input:checkbox").each(function () {
                let prop = $(this).prop("checked");
                $(this).prop("checked", !prop);
            });
        });

        //删除
        $(".btnRemoveAll").click(function () {
            var ids ="";
            $("input:checkbox:checked").each(function () {
                ids+=","+$(this).val();
            });
            ids = ids.substring(1);
            ids = ids.split(",");
            $.ajax({
                type:'post',
                url:'/role/removeList',
                async:true,
                data:{"ids":ids},
                traditional:true,
                success:function (response) {
                    if (response.length==0){
                        swal("全部删除成功", "全部删除成功","success");
                        loadRole();
                    }else if (ids.length==response.length){
                        swal("全部删除失败", "全部删除失败","error");
                    }else {
                        let errornames = "";
                        $(response).each(function () {
                            errornames +=","+$("input:checkbox[value='"+this+"']").parents("tr").children("td").eq(1).text();
                        });
                        errornames = errornames.substring(1);
                        swal("角色:"+errornames + " 删除失败", "部分删除失败","error");
                        loadRole();
                    }
                }
            });
        });
    });
</script>

</body>


</html>
    
